<template>
  <div class="students-page">
    <!-- 添加悬浮按钮 -->
    <floating-buttons 
      :buttons="floatingButtons" 
      @button-click="handleFloatingButtonClick"
    />
    
    <!-- 添加粒子背景 -->
    <div class="particles-container">
      <div v-for="n in 20" :key="n" class="particle" :style="{ 
        '--delay': `${Math.random() * 5}s`,
        '--duration': `${Math.random() * 10 + 10}s`,
        '--position': `${Math.random() * 100}%`,
        '--size': `${Math.random() * 30 + 10}px`
      }"></div>
    </div>
    
    <div class="page-title-section">
      <div class="magical-underline"></div>
      <h1 class="magical-title">学生管理系统</h1>
      <div class="title-decoration left"></div>
      <div class="title-decoration right"></div>
    </div>

    <!-- 添加统计数据展示 -->
    <dashboard-stats class="dashboard-section"></dashboard-stats>
    
    <!-- 添加搜索和过滤功能 -->
    <div class="search-filter-container">
      <el-input
        v-model="searchQuery"
        placeholder="搜索学生姓名或ID"
        prefix-icon="el-icon-search"
        clearable
        class="search-input"
        @input="handleSearch"
      />
      <el-switch
        v-model="filterInvalidNames"
        active-text="过滤无效名称"
        inactive-text="显示所有数据"
        @change="handleFilterChange"
        style="margin-left: 20px;"
        active-color="#6149cd"
      />
    </div>
    
    <!-- 添加内容区网格布局 -->
    <div class="content-grid">
      <div class="main-content">
    <el-card class="main-card">
      <!-- 添加光晕效果 -->
      <div class="glow-effect"></div>
      
      <template #header>
        <div class="card-header">
          <div class="title-section">
            <div class="icon-container">
              <i class="el-icon-user-solid floating-icon"></i>
            </div>
            <span class="page-title">学生管理</span>
          </div>
          <div class="button-group">
            <el-button type="info" @click="handleRefresh" :loading="refreshing" class="action-button magical-btn">
              <i class="el-icon-refresh-right"></i>
              {{ refreshing ? '刷新中...' : '刷新数据' }}
            </el-button>
            <el-button type="primary" @click="dialogVisible = true" class="action-button magical-btn">
              <div class="btn-bg-effect"></div>
              <i class="el-icon-plus"></i>
              添加学生
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="table-container">
        <el-table 
          v-loading="loading" 
              :data="filteredStudents" 
          style="width: 100%" 
          border 
          stripe
          :header-cell-style="{ 
            background: '#f0f7ff', 
            color: '#4a5568',
            textAlign: 'center',
            fontWeight: '600',
            padding: '12px 0',
            fontSize: '15px'
          }"
          :cell-style="{ 
            textAlign: 'center',
            padding: '12px 0'
          }"
          class="student-table"
        >
          <el-table-column label="学生ID" width="420">
            <template #default="scope">
              <div class="student-id-cell">
                <code class="id-code">{{ scope.row.studentId }}</code>
                <el-button v-if="scope.row.studentId" type="text" size="small" @click="copyToClipboard(scope.row.studentId)" class="copy-btn">
                  <i class="el-icon-document-copy"></i>
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180">
            <template #default="scope">
              <span class="student-name">{{ removeQuotes(scope.row.name) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学历" width="180">
            <template #default="scope">
              <el-tag size="medium" effect="plain" class="education-tag">{{ removeQuotes(scope.row.education) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="毕业年份" width="150">
            <template #default="scope">
              <el-tag type="info" size="medium" effect="plain" class="graduation-tag">{{ scope.row.graduationYear }}</el-tag>
            </template>
          </el-table-column>
              <el-table-column label="操作" min-width="150">
            <template #default="scope">
                  <div class="operation-wrapper">
                    <el-button type="primary" size="small" @click="viewCertificates(scope.row)" class="operation-button">
                      <i class="el-icon-view"></i>
                  查看证书
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

          <div v-if="isDataEmpty" class="empty-text">
        <div class="magical-circle"></div>
        <i class="el-icon-warning-outline floating-icon"></i>
        <span>暂无学生数据</span>
      </div>
    </el-card>
      </div>
      <div class="side-content">
        <!-- 只保留状态提示 -->
        <status-notification class="status-widget" status="online" message="区块链网络连接正常"></status-notification>
      </div>
    </div>

    <el-dialog 
      v-model="dialogVisible" 
      title="添加学生" 
      width="600px" 
      center 
      destroy-on-close
      custom-class="fancy-dialog"
    >
      <div class="dialog-background"></div>
      <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 30px">
        <el-step title="基本信息" icon="el-icon-user"></el-step>
        <el-step title="学历信息" icon="el-icon-reading"></el-step>
        <el-step title="确认提交" icon="el-icon-check"></el-step>
      </el-steps>

      <el-form 
        :model="form" 
        :rules="formRules"
        ref="studentForm"
        label-width="120px" 
        class="student-form"
        label-position="top"
        status-icon
      >
        <!-- 第一步：基本信息 -->
        <div v-show="activeStep === 0" class="step-content">
          <div class="form-header">
            <i class="el-icon-user-solid form-header-icon"></i>
            <h3>学生基本信息</h3>
            <div class="floating-dots">
              <span></span><span></span><span></span>
            </div>
          </div>
          
          <el-form-item label="学生ID" prop="studentId">
            <el-input 
              v-model="form.studentId" 
              placeholder="请输入区块链地址格式的学生ID"
              prefix-icon="el-icon-key"
            >
              <template #append>
                <el-button @click="generateRandomId">随机生成</el-button>
              </template>
            </el-input>
            <div class="form-tip">区块链地址格式，用于唯一标识学生身份</div>
          </el-form-item>
          
          <el-form-item label="姓名" prop="name">
            <el-input 
              v-model="form.name" 
              placeholder="请输入学生姓名"
              prefix-icon="el-icon-user"
            >
              <template #suffix>
                <div v-if="form.name" class="magic-effect-container">
                  <div class="magic-sparkle"></div>
                </div>
              </template>
            </el-input>
          </el-form-item>
        </div>

        <!-- 第二步：学历信息 -->
        <div v-show="activeStep === 1" class="step-content">
          <div class="form-header">
            <i class="el-icon-reading form-header-icon"></i>
            <h3>学历信息</h3>
            <div class="floating-dots">
              <span></span><span></span><span></span>
            </div>
          </div>
          
          <el-form-item label="学历" prop="education">
            <el-select 
              v-model="form.education" 
              placeholder="请选择学历" 
              style="width: 100%"
            >
              <el-option label="本科" value="本科">
                <span style="display: flex; align-items: center;">
                  <i class="el-icon-reading" style="margin-right: 8px; color: #409EFF;"></i>
                  本科
                </span>
              </el-option>
              <el-option label="硕士" value="硕士">
                <span style="display: flex; align-items: center;">
                  <i class="el-icon-collection" style="margin-right: 8px; color: #67C23A;"></i>
                  硕士
                </span>
              </el-option>
              <el-option label="博士" value="博士">
                <span style="display: flex; align-items: center;">
                  <i class="el-icon-trophy" style="margin-right: 8px; color: #E6A23C;"></i>
                  博士
                </span>
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="毕业年份" prop="graduationYear">
            <el-date-picker
              v-model="form.graduationYear"
              type="year"
              placeholder="选择年份"
              format="YYYY"
              value-format="YYYY"
              style="width: 100%"
            />
          </el-form-item>
        </div>

        <!-- 第三步：确认信息 -->
        <div v-show="activeStep === 2" class="step-content">
          <div class="form-header">
            <i class="el-icon-check form-header-icon"></i>
            <h3>确认信息</h3>
          </div>
          
          <el-card class="confirmation-card">
            <!-- 添加卡片特效 -->
            <div class="card-shimmer"></div>
            <template #header>
              <div class="confirmation-header">
                <i class="el-icon-info"></i>
                请确认以下信息
              </div>
            </template>
            <div class="confirmation-content">
              <div class="confirmation-item">
                <span class="confirmation-label">学生ID:</span>
                <span class="confirmation-value">{{ form.studentId }}</span>
              </div>
              <div class="confirmation-item">
                <span class="confirmation-label">姓名:</span>
                <span class="confirmation-value">{{ form.name }}</span>
              </div>
              <div class="confirmation-item">
                <span class="confirmation-label">学历:</span>
                <span class="confirmation-value">{{ form.education }}</span>
              </div>
              <div class="confirmation-item">
                <span class="confirmation-label">毕业年份:</span>
                <span class="confirmation-value">{{ form.graduationYear }}</span>
              </div>
            </div>
          </el-card>

          <div class="privacy-notice">
            <el-checkbox v-model="privacyAgreed">我已确认信息无误，同意将数据存储到区块链上</el-checkbox>
          </div>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="prevStep" v-if="activeStep > 0">
            <i class="el-icon-arrow-left"></i> 上一步
          </el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button 
            v-if="activeStep < 2" 
            type="primary" 
            @click="nextStep"
          >
            下一步 <i class="el-icon-arrow-right"></i>
          </el-button>
          <el-button 
            v-else 
            type="success" 
            @click="handleSubmit"
            :disabled="!privacyAgreed || submitLoading"
            :loading="submitLoading"
          >
            <i class="el-icon-check"></i> 提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import DashboardStats from '@/components/DashboardStats.vue'
import FloatingButtons from '@/components/FloatingButtons.vue'
import LogService from '@/store/logService'

export default {
  name: 'StudentManagement',
  components: {
    DashboardStats,
    FloatingButtons
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const dialogVisible = ref(false)
    const refreshing = ref(false)
    const activeStep = ref(0) // 当前步骤
    const privacyAgreed = ref(false) // 隐私同意
    const submitLoading = ref(false) // 提交加载状态
    const studentForm = ref(null) // 表单引用
    const deleting = ref(false) // 添加删除状态变量
    
    const form = ref({
      studentId: '',
      name: '',
      education: '',
      graduationYear: new Date().getFullYear()
    })

    // 表单验证规则
    const formRules = {
      studentId: [
        { required: true, message: '请输入学生ID', trigger: 'blur' },
        { min: 10, message: '学生ID长度不能小于10个字符', trigger: 'blur' }
      ],
      name: [
        { required: true, message: '请输入学生姓名', trigger: 'blur' },
        { min: 2, message: '姓名长度不能小于2个字符', trigger: 'blur' }
      ],
      education: [
        { required: true, message: '请选择学历', trigger: 'change' }
      ],
      graduationYear: [
        { required: true, message: '请选择毕业年份', trigger: 'change' }
      ]
    }

    const students = computed(() => {
      // 添加数据格式检查和详细日志
      const studentsList = store.state.students;
      console.log('获取到学生数据:', JSON.stringify(studentsList, null, 2));
      
      if (!Array.isArray(studentsList)) {
        console.error('学生数据不是数组!', studentsList);
        return [];
      }
      
      // 检查每个学生的关键字段
      const validatedStudents = studentsList.map(student => {
        console.log('学生记录:', student);
        
        // 确保学生ID存在
        if (!student.studentId) {
          console.warn('学生缺少studentId:', student);
        }
        
        // 确保学生姓名存在
        if (!student.name) {
          console.warn('学生缺少name:', student);
        }
        
        return student;
      });
      
      return validatedStudents;
    });

    const loading = computed(() => store.state.loading)

    // 去除字符串中的引号
    const removeQuotes = (text) => {
      if (!text) return '';
      
      // 将字符串中的所有引号（单引号和双引号）去除
      return String(text).replace(/['"]/g, '');
    }

    // 生成随机ID
    const generateRandomId = () => {
      const hex = '0123456789abcdef';
      let id = '0x';
      for (let i = 0; i < 40; i++) {
        id += hex.charAt(Math.floor(Math.random() * 16));
      }
      form.value.studentId = id;
    }

    // 下一步
    const nextStep = () => {
      console.log('点击下一步按钮，当前步骤:', activeStep.value);
      
      // 直接增加步骤，跳过验证逻辑
      if (activeStep.value < 2) {
        activeStep.value++;
        console.log('步骤已增加，新步骤:', activeStep.value);
      }
    };

    // 上一步
    const prevStep = () => {
      if (activeStep.value > 0) {
        activeStep.value--;
        console.log('返回上一步，当前步骤:', activeStep.value);
      }
    }

    const handleSubmit = async () => {
      if (!privacyAgreed.value) {
        ElMessage.warning('请先同意隐私条款');
        return;
      }

      studentForm.value.validate(async (valid) => {
        if (valid) {
          try {
            submitLoading.value = true;
            
            // 创建提交数据，移除可能包含的引号
            const submitData = {
              studentId: form.value.studentId,
              name: removeQuotes(form.value.name),
              education: removeQuotes(form.value.education),
              graduationYear: form.value.graduationYear
            };

            const result = await store.dispatch('createStudent', submitData)
            console.log('Create student result:', result)
            
            if (result?.code === 0) {
              ElMessage.success({
                message: '添加学生成功',
                type: 'success',
                duration: 2000
              });
              dialogVisible.value = false;
              form.value = {
                studentId: '',
                name: '',
                education: '',
                graduationYear: new Date().getFullYear()
              };
              
              // 重置步骤和隐私同意
              activeStep.value = 0;
              privacyAgreed.value = false;
              
              // 刷新学生列表
              await store.dispatch('fetchStudents');

              // 创建学生成功时记录日志
              LogService.logStudentOperation(`创建学生 ${form.value.name}`, {
                studentName: form.value.name,
                education: form.value.education,
                graduationYear: form.value.graduationYear
              })
            } else {
              ElMessage.error(result?.message || '添加学生失败');
            }
          } catch (error) {
            console.error('Error in handleSubmit:', error)
            ElMessage.error('添加学生失败：' + error.message);

            // 记录失败日志
            LogService.logStudentOperation(`创建学生失败`, {
              studentName: form.value.name,
              error: error.message
            }, 'error', error.message)
          } finally {
            submitLoading.value = false;
          }
        }
      });
    }

    const handleRefresh = async () => {
      try {
        refreshing.value = true
        console.log('开始从链上获取学生数据')
        await store.dispatch('fetchStudents')
        console.log('学生数据刷新成功:', store.state.students)
        ElMessage.success('学生数据刷新成功')
      } catch (error) {
        console.error('刷新学生数据失败:', error)
        ElMessage.error('刷新学生数据失败: ' + error.message)
      } finally {
        refreshing.value = false
      }
    }

    const viewCertificates = (student) => {
      // 传递完整的学生信息，包括原始ID和生成的ID
      console.log('查看学生证书, 学生信息:', student)
      
      // 优先使用原始学生ID，如果不可用则使用生成的ID
      const studentId = student.studentId || student.displayStudentId
      
      // 导航到证书页面并传递学生ID
      router.push({ 
        name: 'Certificates',
        query: { studentId }
      })
    }

    const copyToClipboard = (text) => {
      navigator.clipboard.writeText(text).then(() => {
        ElMessage.success('已复制到剪贴板');
      }).catch(err => {
        console.error('复制失败:', err);
        ElMessage.error('复制失败');
      });
    }

    // 悬浮按钮配置
    const floatingButtons = [
      {
        id: 'add_student',
        icon: 'el-icon-user-solid',
        label: '添加学生',
        title: '添加新学生',
        color: '#409EFF',
        action: 'add_student'
      },
      {
        id: 'refresh',
        icon: 'el-icon-refresh',
        label: '刷新列表',
        title: '刷新学生列表',
        color: '#67C23A',
        action: 'refresh'
      },
      {
        id: 'export',
        icon: 'el-icon-download',
        label: '导出数据',
        title: '导出学生数据',
        color: '#E6A23C',
        action: 'export'
      },
      {
        id: 'help',
        icon: 'el-icon-question',
        label: '帮助',
        title: '获取帮助',
        color: '#909399',
        action: 'help'
      }
    ]
    
    // 处理悬浮按钮点击
    const handleFloatingButtonClick = (button) => {
      switch (button.action) {
        case 'add_student':
          dialogVisible.value = true
          break
        case 'refresh':
          handleRefresh()
          break
        case 'export':
          exportStudents()
          break
        case 'help':
          showHelp()
          break
      }
    }
    
    // 导出学生数据
    const exportStudents = () => {
      if (students.value.length === 0) {
        ElMessage.warning('暂无学生数据可导出');
        return;
      }

      // 创建一个对话框让用户选择导出格式
      ElMessageBox.confirm(
        '<div style="text-align:center">请选择导出格式</div>',
        '导出学生数据',
        {
          confirmButtonText: 'CSV格式',
          cancelButtonText: 'JSON格式',
          distinguishCancelAndClose: true,
          closeOnClickModal: false,
          dangerouslyUseHTMLString: true,
          center: true,
          customClass: 'export-dialog'
        }
      )
        .then(() => {
          // 用户选择了CSV格式
          exportAsCSV();
          // 记录日志
          LogService.logStudentOperation('导出学生数据', { format: 'CSV', count: students.value.length });
        })
        .catch((action) => {
          if (action === 'cancel') {
            // 用户选择了JSON格式
            exportAsJSON();
            // 记录日志
            LogService.logStudentOperation('导出学生数据', { format: 'JSON', count: students.value.length });
          }
        });
    }

    // 导出为CSV格式
    const exportAsCSV = () => {
      // CSV表头
      const headers = ['学生ID', '姓名', '学历', '毕业年份'];
      // 组合CSV内容
      let csvContent = headers.join(',') + '\r\n';
      
      students.value.forEach(student => {
        const row = [
          student.studentId,
          `"${student.name}"`, // 添加引号以处理可能包含逗号的名称
          `"${student.education}"`,
          student.graduationYear
        ];
        csvContent += row.join(',') + '\r\n';
      });
      
      // 创建Blob对象
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      saveFile(blob, `学生数据_${new Date().toISOString().split('T')[0]}.csv`);
      
      ElMessage.success('学生数据已成功导出为CSV格式');
    }

    // 导出为JSON格式
    const exportAsJSON = () => {
      // 创建一个仅包含需要的数据的对象
      const exportData = students.value.map(student => ({
        studentId: student.studentId,
        name: student.name,
        education: student.education,
        graduationYear: student.graduationYear
      }));
      
      // 创建Blob对象
      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
      saveFile(blob, `学生数据_${new Date().toISOString().split('T')[0]}.json`);
      
      ElMessage.success('学生数据已成功导出为JSON格式');
    }

    // 保存文件的通用方法
    const saveFile = (blob, fileName) => {
      // 创建下载链接
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      
      // 添加到文档并触发点击
      document.body.appendChild(link);
      link.click();
      
      // 清理
      document.body.removeChild(link);
      URL.revokeObjectURL(link.href);
    }

    // 显示帮助信息
    const showHelp = () => {
      ElMessageBox.alert(
        `<div class="help-content">
          <h3>学生管理系统使用指南</h3>
          <p><strong>基本功能：</strong></p>
          <ul>
            <li><strong>添加学生：</strong> 点击悬浮按钮中的"添加学生"按钮，填写学生信息并提交</li>
            <li><strong>查看证书：</strong> 在学生列表中点击"查看证书"按钮，可以查看该学生的所有证书信息</li>
            <li><strong>导出数据：</strong> 点击悬浮按钮中的"导出数据"按钮，选择导出格式(CSV或JSON)后，系统将自动下载学生数据文件</li>
            <li><strong>刷新列表：</strong> 点击悬浮按钮中的"刷新列表"按钮，可以更新学生数据</li>
          </ul>
          <p><strong>数据导出说明：</strong></p>
          <ul>
            <li>CSV格式：适合在Excel等电子表格软件中打开查看</li>
            <li>JSON格式：适合开发人员或数据分析使用</li>
            <li>导出的数据包括：学生ID、姓名、学历和毕业年份</li>
          </ul>
          <p><strong>注意事项：</strong></p>
          <ul>
            <li>学生ID必须符合系统规范，长度不少于10个字符</li>
            <li>添加学生时，系统会自动检测输入的信息是否符合要求</li>
            <li>所有操作都会被记录在系统日志中，方便后续追踪</li>
          </ul>
        </div>`,
        '帮助信息',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '我知道了',
          customClass: 'help-dialog'
        }
      );
      
      // 记录日志
      LogService.logSystemOperation('查看学生管理帮助');
    }

    // 添加搜索和过滤功能
    const searchQuery = ref('')
    const filterInvalidNames = ref(true) // 默认开启过滤
    
    const handleSearch = () => {
      console.log('执行搜索:', searchQuery.value);
      // 搜索功能通过computed属性自动实现
    }
    
    const handleFilterChange = (value) => {
      console.log('过滤设置变更:', value);
      LogService.logSystemOperation(value ? '开启学生数据过滤' : '关闭学生数据过滤', {
        filterStatus: value ? '开启' : '关闭'
      });
    }
    
    const filteredStudents = computed(() => {
      // 获取原始学生数据
      const studentsList = store.state.students;
      
      if (!Array.isArray(studentsList)) {
        console.error('学生数据不是数组!', studentsList);
        return [];
      }
      
      let result = [...studentsList];
      
      // 根据过滤条件过滤掉不符合要求的学生名称
      if (filterInvalidNames.value) {
        result = result.filter(student => {
          if (!student || !student.name) return false;
          
          const name = String(student.name || '').toLowerCase().trim();
          
          // 检查是否包含关键词或匹配特定格式
          const invalidKeywords = ['未命名学生', '未命名', '未命', 'unnamed', 'test', 'null', 'undefined'];
          const containsInvalidKeyword = invalidKeywords.some(keyword => name.includes(keyword.toLowerCase()));
          
          // 检查是否匹配"未命名学生 #数字"的格式
          const matchesNumberedFormat = /未命名学生\s*#\d+/.test(name);
          
          return !(containsInvalidKeyword || matchesNumberedFormat);
        });
      }
      
      // 根据搜索条件进一步过滤
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase().trim();
        result = result.filter(student => {
          const studentName = String(student.name || '').toLowerCase();
          const studentId = String(student.studentId || '').toLowerCase();
          return studentName.includes(query) || studentId.includes(query);
        });
      }
      
      return result;
    });

    // 修正空数据提示的判断条件
    const isDataEmpty = computed(() => {
      return filteredStudents.value.length === 0 && !loading.value;
    });

    onMounted(async () => {
      try {
        console.log('学生组件已挂载，开始获取数据...')
        await store.dispatch('fetchStudents')
        console.log('Current students:', store.state.students) // 添加日志
        
        // 检查数据渲染情况
        setTimeout(() => {
          const studentRows = document.querySelectorAll('.student-id-cell');
          console.log(`页面上渲染的学生行数: ${studentRows.length}`);
          
          if (studentRows.length === 0 && store.state.students.length > 0) {
            console.warn('警告: 存在数据但未渲染到表格中');
            // 尝试强制刷新
            store.commit('setStudents', [...store.state.students]);
          }
        }, 1000);

        // 添加日志记录
        LogService.logStudentOperation('访问学生管理页面')
      } catch (error) {
        console.error('Error in onMounted:', error) // 添加错误日志
        ElMessage.error('获取学生列表失败：' + error.message)
      }
    })

    return {
      dialogVisible,
      form,
      formRules,
      studentForm,
      activeStep,
      privacyAgreed,
      submitLoading,
      handleSubmit,
      prevStep,
      nextStep,
      generateRandomId,
      handleRefresh,
      viewCertificates,
      students,
      loading,
      refreshing,
      copyToClipboard,
      removeQuotes,
      deleting,
      floatingButtons,
      handleFloatingButtonClick,
      exportStudents,
      exportAsCSV,
      exportAsJSON,
      saveFile,
      showHelp,
      searchQuery,
      filterInvalidNames,
      handleSearch,
      handleFilterChange,
      filteredStudents,
      isDataEmpty
    }
  }
}
</script>

<style scoped>
.students-page {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
}

/* 粒子背景效果 */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle, rgba(173,216,230,0.8) 0%, rgba(173,216,230,0) 70%);
  border-radius: 50%;
  top: calc(var(--position) - 50px);
  left: calc(var(--position) - 50px);
  animation: float var(--duration) ease-in-out var(--delay) infinite;
  opacity: 0.4;
  filter: blur(5px);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-100px) translateX(50px) scale(1.2);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-30px) translateX(100px) scale(0.8);
    opacity: 0.6;
  }
  75% {
    transform: translateY(-70px) translateX(30px) scale(1.1);
    opacity: 0.4;
  }
}

/* 页面标题区样式 */
.page-title-section {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  padding: 20px 0;
}

.magical-title {
  font-size: 32px;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(45deg, #34b3f1, #6149cd, #6149cd, #34b3f1);
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradientText 6s ease infinite;
  position: relative;
  display: inline-block;
  margin: 0;
  letter-spacing: 2px;
}

@keyframes gradientText {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.magical-underline {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, rgba(97,73,205,0) 0%, rgba(97,73,205,1) 50%, rgba(97,73,205,0) 100%);
}

.title-decoration {
  position: absolute;
  top: 50%;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, rgba(52,179,241,0.2) 0%, rgba(52,179,241,1) 100%);
}

.title-decoration.left {
  right: calc(50% + 100px);
  transform: translateY(-50%);
}

.title-decoration.right {
  left: calc(50% + 100px);
  transform: translateY(-50%) rotate(180deg);
}

/* 卡片样式增强 */
.main-card {
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  border: none;
  position: relative;
  transition: all 0.5s;
}

.main-card:hover {
  box-shadow: 0 15px 30px rgba(52, 179, 241, 0.2);
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-group {
  display: flex;
  gap: 15px;
  margin-left: auto;
}

.glow-effect {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(97,73,205,0.3) 0%, rgba(97,73,205,0) 70%);
  border-radius: 50%;
  filter: blur(20px);
  animation: moveGlow 10s infinite alternate ease-in-out;
  z-index: 0;
  pointer-events: none;
}

@keyframes moveGlow {
  0% {
    top: -100px;
    left: -100px;
  }
  25% {
    top: 30%;
    left: 80%;
  }
  50% {
    top: 70%;
    left: 20%;
  }
  75% {
    top: 10%;
    left: 50%;
  }
  100% {
    top: 50%;
    left: 80%;
  }
}

/* 图标容器与动画 */
.icon-container {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #34b3f1, #6149cd);
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
}

.icon-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.8), transparent);
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.floating-icon {
  animation: floatingIcon 3s ease-in-out infinite;
  color: white;
  font-size: 20px;
}

@keyframes floatingIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 按钮特效 */
.magical-btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.magical-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(97, 73, 205, 0.2);
}

.magical-btn:active {
  transform: translateY(1px);
}

.action-button i {
  margin-right: 5px;
}

.btn-bg-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #34b3f1, #6149cd, #6149cd, #34b3f1);
  background-size: 300% 300%;
  animation: gradientBg 3s ease infinite;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.magical-btn:hover .btn-bg-effect {
  opacity: 0.2;
}

@keyframes gradientBg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 空状态特效 */
.magical-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,179,241,0.1) 0%, rgba(52,179,241,0) 70%);
  animation: pulseCircle 4s infinite;
  z-index: -1;
}

@keyframes pulseCircle {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.3); opacity: 0.1; }
}

/* 对话框背景 */
.dialog-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right, rgba(97,73,205,0.1) 0%, rgba(97,73,205,0) 70%),
              radial-gradient(ellipse at bottom left, rgba(52,179,241,0.1) 0%, rgba(52,179,241,0) 70%);
  z-index: -1;
  pointer-events: none;
}

.fancy-dialog {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(97, 73, 205, 0.1);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

/* 表单特效 */
.magic-effect-container {
  position: relative;
  width: 20px;
  height: 20px;
}

.magic-sparkle {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #6149cd 0%, transparent 60%);
  border-radius: 50%;
  animation: sparkle 2s infinite;
}

@keyframes sparkle {
  0%, 100% { transform: scale(0.5); opacity: 0.2; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.floating-dots {
  display: flex;
  gap: 5px;
  margin-left: 10px;
}

.floating-dots span {
  width: 6px;
  height: 6px;
  background-color: #6149cd;
  border-radius: 50%;
  display: inline-block;
}

.floating-dots span:nth-child(1) {
  animation: dot-float 1.5s infinite ease-in-out;
}

.floating-dots span:nth-child(2) {
  animation: dot-float 1.5s infinite ease-in-out 0.3s;
}

.floating-dots span:nth-child(3) {
  animation: dot-float 1.5s infinite ease-in-out 0.6s;
}

@keyframes dot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 卡片光影效果 */
.card-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.8) 50%, 
    rgba(255,255,255,0) 100%);
  animation: cardShimmer 3s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes cardShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 融合原有样式 */
.form-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(97, 73, 205, 0.2);
  position: relative;
  overflow: hidden;
}

.form-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #34b3f1, #6149cd, #34b3f1);
  background-size: 200% 100%;
  animation: gradientLine 3s linear infinite;
}

@keyframes gradientLine {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.form-header-icon {
  font-size: 24px;
  background: linear-gradient(135deg, #34b3f1, #6149cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 10px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.4;
}

.confirmation-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.confirmation-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.confirmation-header i {
  margin-right: 8px;
  color: #409EFF;
}

.confirmation-content {
  padding: 10px 0;
}

.confirmation-item {
  display: flex;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #ebeef5;
}

.confirmation-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.confirmation-label {
  width: 100px;
  color: #606266;
  font-weight: bold;
}

.confirmation-value {
  flex: 1;
  color: #303133;
}

.privacy-notice {
  margin-top: 20px;
  text-align: center;
}

.empty-text {
  text-align: center;
  color: #909399;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.empty-text i {
  font-size: 48px;
  color: #c0c4cc;
}

.student-id-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0 5px;
}

.id-code {
  font-family: 'Consolas', monospace;
  background-color: #f5f7fa;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  white-space: nowrap;
  overflow: visible;
  max-width: 380px;
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #606266;
  font-weight: 500;
  text-align: center;
}

.copy-btn {
  flex-shrink: 0;
}

/* 姓名样式 */
.student-name {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(64, 158, 255, 0.05);
  display: inline-block;
  min-width: 80px;
  text-align: center;
}

/* 操作按钮容器 */
.operation-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 10px;
}

/* 操作按钮样式 */
.operation-button {
  width: auto;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 9px 22px;
  transition: all 0.3s;
  background: linear-gradient(to right, #34b3f1, #6149cd);
  border: none;
  color: white;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.operation-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(97, 73, 205, 0.3);
  background: linear-gradient(to right, #6149cd, #34b3f1);
}

.operation-button:focus,
.operation-button:active {
  color: white;
  border: none;
}

.operation-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.operation-button:hover::before {
  left: 100%;
}

.operation-button i {
  font-size: 16px;
  transition: all 0.3s;
}

.operation-button:hover i {
  transform: scale(1.2);
}

.student-form {
  padding: 10px 20px;
}

:deep(.el-table th) {
  background-color: #f0f7ff !important;
  color: #4a5568 !important;
  font-weight: 600;
  padding: 12px 0;
  font-size: 15px;
}

:deep(.el-table td) {
  padding: 14px 0;
  font-size: 14px;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #f8fafc;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f0f9ff;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.step-content {
  margin-bottom: 20px;
  animation: fadeIn 0.5s ease-in-out;
}

.form-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(97, 73, 205, 0.2);
  position: relative;
  overflow: hidden;
}

.form-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #34b3f1, #6149cd, #34b3f1);
  background-size: 200% 100%;
  animation: gradientLine 3s linear infinite;
}

@keyframes gradientLine {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.form-header-icon {
  font-size: 24px;
  background: linear-gradient(135deg, #34b3f1, #6149cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 10px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 添加一些响应式样式 */
@media screen and (max-width: 768px) {
  .fancy-dialog {
    width: 90% !important;
  }
}

/* 表格容器样式 */
.table-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  width: 98%;
  margin: 0 auto;
}

/* 表格样式优化 */
.student-table {
  width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  table-layout: fixed;
}

:deep(.el-table__header) {
  width: 100% !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}

:deep(.el-table__row) {
  transition: all 0.3s;
  height: 55px;
}

:deep(.el-table__row:hover) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  z-index: 1;
  position: relative;
}

:deep(.el-table::before) {
  display: none;
}

:deep(.el-table__inner-wrapper::before) {
  display: none;
}

/* 标签样式 */
:deep(.el-tag) {
  border-radius: 12px;
  padding: 2px 10px;
  font-weight: 500;
}

/* 优化学历和毕业年份列的视觉效果 */
.education-tag, .graduation-tag {
  font-size: 14px;
  padding: 6px 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  width: 80%;
  display: inline-block;
}

.education-tag {
  background: rgba(64, 158, 255, 0.1);
  border-color: rgba(64, 158, 255, 0.3);
  color: #2c77cc;
}

.graduation-tag {
  background: rgba(103, 194, 58, 0.1);
  border-color: rgba(103, 194, 58, 0.3);
  color: #529b2e;
}

:deep(.el-tag.el-tag--info) {
  background: rgba(144, 147, 153, 0.1);
  border-color: rgba(144, 147, 153, 0.2);
  color: #606266;
  font-size: 14px;
}

:deep(.el-tag.el-tag--plain) {
  background: rgba(64, 158, 255, 0.1);
  border-color: rgba(64, 158, 255, 0.2);
  color: #409EFF;
  font-size: 14px;
}

:deep(.el-table__header-wrapper th.el-table__cell) {
  background-color: #f0f7ff !important;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  color: #303133 !important;
}

:deep(.el-button--text) {
  color: #409EFF;
  transition: all 0.3s;
}

:deep(.el-button--text:hover) {
  color: #66b1ff;
  transform: scale(1.1);
}

:deep(.el-button--text i) {
  font-size: 16px;
}

/* 添加网格布局样式 */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 20px;
  margin-bottom: 30px;
  align-items: start;
  position: relative;
}

.side-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: auto;
  z-index: 100;
}

.status-widget {
  margin: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
}

.dashboard-section {
  margin-bottom: 20px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .side-content {
    order: -1;
    position: static;
  }
}

/* 帮助对话框和导出对话框样式 */
:deep(.help-dialog) .el-message-box__wrapper,
:deep(.export-dialog) .el-message-box__wrapper {
  backdrop-filter: blur(10px);
}

:deep(.help-dialog) .el-message-box,
:deep(.export-dialog) .el-message-box {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(100, 100, 255, 0.2);
  background: linear-gradient(145deg, #ffffff, #f8f9fc);
  max-width: 500px;
}

:deep(.help-dialog) .el-message-box__header,
:deep(.export-dialog) .el-message-box__header {
  padding: 15px 20px;
  background: linear-gradient(45deg, #6149cd, #34b3f1);
  border-radius: 12px 12px 0 0;
}

:deep(.help-dialog) .el-message-box__title,
:deep(.export-dialog) .el-message-box__title {
  color: white;
  font-weight: bold;
}

:deep(.help-dialog) .el-message-box__content,
:deep(.export-dialog) .el-message-box__content {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

:deep(.help-dialog) .el-button,
:deep(.export-dialog) .el-button {
  padding: 8px 24px;
  border-radius: 8px;
  transition: all 0.3s;
}

:deep(.help-dialog) .el-button:hover,
:deep(.export-dialog) .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.help-content {
  line-height: 1.6;
}

.help-content h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #6149cd;
  border-bottom: 2px solid #34b3f1;
  padding-bottom: 8px;
}

.help-content p {
  margin: 12px 0;
}

.help-content ul {
  padding-left: 20px;
  margin: 10px 0;
}

.help-content li {
  margin-bottom: 8px;
}

.help-content strong {
  color: #6149cd;
}

/* 添加搜索和过滤容器样式 */
.search-filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px);
  transition: all 0.3s;
}

.search-filter-container:hover {
  box-shadow: 0 6px 16px rgba(97, 73, 205, 0.1);
  transform: translateY(-2px);
}

.search-input {
  flex-grow: 1;
  margin-right: 15px;
}

:deep(.el-input__inner) {
  border-radius: 8px;
  padding-left: 40px;
  height: 42px;
  border: 1px solid #e0e3e9;
  transition: all 0.3s;
}

:deep(.el-input__inner:focus) {
  border-color: #6149cd;
  box-shadow: 0 0 0 2px rgba(97, 73, 205, 0.1);
}

:deep(.el-input__prefix) {
  left: 15px;
}

:deep(.el-input__prefix i) {
  font-size: 16px;
  color: #6149cd;
}

:deep(.el-switch__label) {
  color: #606266;
}

:deep(.el-switch__label.is-active) {
  color: #6149cd;
}

:deep(.el-switch__label--right) {
  margin-left: 10px;
}

:deep(.el-switch__label--left) {
  margin-right: 10px;
}
</style> 